<template>
  <div class="lunbo">
    <el-upload
      class="upload-demo"
      action="http://192.168.35.17:3005/advert/uploadimg"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
  </div>
</template>

<script>
import {getAdvertList,deletebannerFunc} from "../http/request"
export default {
  name: "lunbo",
  data() {
      return {
        fileList: [],
        bannerName:'',
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file.name, fileList);
        this.deleteAdvert(file.name)
      },
      handlePreview(file) {
        console.log(file);
        console.log(file.name);
        this.bannerName = file.name;
      },
      // 获取轮播图的信息
      async showAdvert(){
        await getAdvertList('/advert/list')
        .then(data=>{
          let newArray = data.result.map((item)=>{
            return {name:item.name,url:item.url}
          })
          this.fileList = newArray
        })
      },
      // 删除轮播图的信息
      async deleteAdvert(bname){
        await deletebannerFunc('/advert/deletebanner',{name:bname})
        .then(data=>{
          console.log(data);
        })
      },

    },
    
    mounted(){
      this.showAdvert();
    }
};
</script>

<style lang="scss" scoped>
</style>